<template>
	<view class="container">
		<view class="example-body">
			<uni-file-picker class="picturesCon" limit="1" @select="select" @delete="deleteImg" :image-styles="imageStyles">
				<view class="picturesBtn" :style="{ backgroundImage: `url(${backgroundImage})` }"></view>
			</uni-file-picker>
		</view>
	</view>
</template>


<script>
	import config from 'config/env';
	export default {
		name:"pictures",
		props:{
			backgroundImage: {
			    type: String,
			    default:''
			},
		},
		
		data() {
			return {
				flagStatus:false, //删除
				imageStyles:{
					//#ifdef H5
					width:175,
					height:125,
					//#endif
					
					//#ifdef APP-PLUS
					width:210,
					height:155,
					//#endif
					
					//#ifdef MP-WEIXIN
					width:175,
					height:135,
					//#endif
					
					border:{
						color:"#f8f8f8",
						width:1,
						style:'dashed',
						radius:'2px'
					}
				},
				fileLists:''
			}
		},
		methods:{
			// 获取上传状态
			select(e){
				const filePath  = e.tempFilePaths[0]
				this.uploadAvatar(filePath)
				// this.fileLists.push(filePath);
	            this.fileLists = filePath
		
			},
			// 获取上传进度
			progress(e){
				console.log('上传进度：',e)
			},
			
			// 上传成功
			success(e){
				this.flagStatus = false
				console.log('上传成功')
			},
			deleteImg(e){
				this.flagStatus = true
				this.$emit('remoceUploaded',this.flagStatus)
				this.$emit('remoceUploaded2',this.flagStatus)
				this.$emit('remoceUploaded3',this.flagStatus)
			},
			
			chooseImage() {
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						console.log(tempFilePaths[0]+'-------')
						this.uploadAvatar(tempFilePaths[0]);
					}
				});
			},
			uploadAvatar(filePath) {
				
			      const requestUrl = config.basePath + '/mallapi/file/upload';
				  
			      const formData = {
			        fileType: 'image'
			      };
			      const header = {
			        'Tenant-Id': '1590229800633634816',
			        'hx-token': uni.getStorageSync('hx-token') ? uni.getStorageSync('hx-token') : null,
			        'timestamp': new Date().getTime(),
			        //#ifdef MP-WEIXIN
			        'client-type': 'WX-MA',
			        'app-id': uni.getAccountInfoSync().miniProgram.appId,
			        //#endif
			        //#ifdef APP-PLUS
			        'client-type': 'APP',
			        //#endif
			        //#ifdef H5
			        'client-type': 'H5',
			        //#endif
			        //#ifdef MP-ALIPAY
			        'client-type': 'ALI-MA',
			        'app-id': config.aliAppId,
			        //#endif
			      };
			
			      uni.uploadFile({
			        url: requestUrl,
			        filePath: filePath,
			        name: 'file',
			        formData: formData,
			        header: header,
			        success: (uploadFileRes) => {
			          const data = JSON.parse(uploadFileRes.data);
			          // const { url, extname, name } = data.data;
			          // this.fileLists.push({ url, extname, name });
			          // console.log('上传成功');
					  // console.log( data.data)
					  
					   // 触发自定义事件，并传递 data.data 到父组件
					   this.$emit('handleUploaded', data.data, this.fileLists,this.flagStatus);
					   this.$emit('handleUploaded2', data.data, this.fileLists,this.flagStatus);
					   this.$emit('handleUploaded3', data.data, this.fileLists,this.flagStatus);
					   
			        },
			        fail: (error) => {
			          console.log('上传失败：', error);
					  this.$emit('failUploaded','图片上传失败，请重新上传')
					  this.$emit('failUploaded2','图片上传失败，请重新上传')
					  this.$emit('failUploaded3','图片上传失败，请重新上传')
			        }
			      });
			},
			
		}
	}
</script>

<style lang="scss">


	.text {
		font-size: 14px;
		color: #333;
	}
	/* #ifdef  APP-PLUS  */
	.picturesBtn{
		width: 210px !important;
		height: 155px;
		background: url('#{$global-url-prefix}sfzz.png') no-repeat;
		background-size: cover;
		border-radius: 10rpx;
	}
	/* #endif */
	/* #ifdef  MP-WEIXIN */
	.picturesBtn{
		width: 175px;
		height: 135px;
		background: url('#{$global-url-prefix}sfzz.png') no-repeat;
		background-size: cover;
		border-radius: 10rpx;
	}
	/* #endif */
	
	/* #ifdef  H5 */
	.picturesBtn{
		width: 175px;
		height: 125px;
		background: url('#{$global-url-prefix}sfzz.png') no-repeat;
		background-size: cover;
		border-radius: 10rpx;
	}
	/* #endif */
	
	
</style>
